import React, {useEffect, useState} from 'react';
import {
  View,
  Text,
  Image,
  Pressable,
  StyleSheet,
  Dimensions,
} from 'react-native';
import {useUserId} from '../../hooks';
import {getLikeList, getPlayListApi} from '../../api/home';
import SongList from './SongList';
import {ScrollView} from 'react-native-gesture-handler';
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    marginTop: 10,
    width: '95%',
    borderRadius: 5,
  },
});
const MainPage = () => {
  const windowHeight = Dimensions.get('window').height;
  const userId = useUserId();
  const [idList, setIdList] = useState({});
  const [playList, setPlayList] = useState({});
  useEffect(() => {
    async function get() {
      // 获取用户喜欢的音乐
      let likeListRes = await getLikeList({uid: userId});
      let likeListData = await likeListRes.json();
      setIdList(likeListData);
      // console.log(idList);
      // 获取用户的歌单
      let playListRes = await getPlayListApi({uid: userId});
      let playListData = await playListRes.json();
      setPlayList(playListData);
      console.log(playListData);
    }
    get();
  }, []);
  return (
    <ScrollView
      style={{height: windowHeight - 200}}
      contentContainerStyle={{alignItems: 'center'}}>
      <Pressable style={{...styles.container}}>
        <View
          style={{
            width: '50%',
            // height: 80,
            padding: 10,
            flexDirection: 'row',
            alignItems: 'center',
            // backgroundColor: 'red',
          }}>
          <View
            style={{
              width: 70,
              height: 70,
              flexDirection: 'row',
              backgroundColor: '#ddd',
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Image
              source={require('../../assets/love.png')}
              style={{width: '50%', height: '50%', alignItems: 'center'}}
            />
          </View>
          <View style={{justifyContent: 'center', marginLeft: 10}}>
            <Text style={{fontSize: 16}}>我喜欢的音乐</Text>
            <Text style={{marginTop: 10, color: '#666'}}>
              {idList && idList.ids && idList.ids.length}首
            </Text>
          </View>
        </View>
      </Pressable>
      <View style={{...styles.container}}>
        <SongList
          title="创建歌单"
          playList={
            playList && playList.playlist && playList.playlist.slice(1, 2)
          }
        />
        <SongList
          title="收藏歌单"
          playList={playList && playList.playlist && playList.playlist.slice(2)}
        />
      </View>
    </ScrollView>
  );
};

export default MainPage;
